<script setup lang="ts">
import { reactive, ref } from 'vue';

defineOptions({
  name: 'ChartDesignerModal'
});

const visible = defineModel<boolean>('visible', { required: true });

interface Emits {
  (e: 'confirm', config: any): void;
}

const emit = defineEmits<Emits>();

// 图表配置
const chartConfig = reactive({
  id: '',
  type: 'bar',
  title: '',
  sql: '',
  xField: '',
  yField: ''
});

// 图表类型选项
const chartTypeOptions = [
  { label: '柱状图', value: 'bar' },
  { label: '折线图', value: 'line' },
  { label: '饼图', value: 'pie' },
  { label: '仪表盘', value: 'gauge' },
  { label: '地图', value: 'map' },
  { label: '表格', value: 'table' }
];

// 确认
function handleConfirm() {
  emit('confirm', { ...chartConfig });
  visible.value = false;
}

// 重置
function resetForm() {
  Object.assign(chartConfig, {
    id: '',
    type: 'bar',
    title: '',
    sql: '',
    xField: '',
    yField: ''
  });
}
</script>

<template>
  <NModal v-model:show="visible" preset="card" title="图表设计器" style="width: 800px">
    <NForm :model="chartConfig" label-placement="left" :label-width="100">
      <NFormItem label="图表ID" path="id">
        <NInput v-model:value="chartConfig.id" placeholder="请输入图表ID" />
      </NFormItem>

      <NFormItem label="图表类型" path="type">
        <NSelect v-model:value="chartConfig.type" :options="chartTypeOptions" placeholder="请选择图表类型" />
      </NFormItem>

      <NFormItem label="图表标题" path="title">
        <NInput v-model:value="chartConfig.title" placeholder="请输入图表标题" />
      </NFormItem>

      <NFormItem label="查询SQL" path="sql">
        <NInput v-model:value="chartConfig.sql" type="textarea" placeholder="请输入查询SQL" :rows="6" />
      </NFormItem>

      <NFormItem label="X轴字段" path="xField">
        <NInput v-model:value="chartConfig.xField" placeholder="请输入X轴字段名" />
      </NFormItem>

      <NFormItem label="Y轴字段" path="yField">
        <NInput v-model:value="chartConfig.yField" placeholder="请输入Y轴字段名" />
      </NFormItem>
    </NForm>

    <template #footer>
      <NSpace justify="end">
        <NButton @click="visible = false">取消</NButton>
        <NButton type="primary" @click="handleConfirm">确定</NButton>
      </NSpace>
    </template>
  </NModal>
</template>
